<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .tabbar {
      height: 60px;
      line-height: 60px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
    }

    .tabbar>span {
      flex: 1;
      border: 1px solid #ccc;
      text-align: center;
      cursor: pointer;
    }

    .tabbar>span.on {
      color: red;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- <ml-home></ml-home>
    <ml-about></ml-about>
    <ml-user></ml-user> -->

    <!-- <keep-alive :include="['ml-home','ml-about']"> -->
    <!-- <keep-alive :exclude="['ml-home']"> -->
    <keep-alive>
      <component :is="comp"></component>
    </keep-alive>

    <!-- <ml-tabbar :value="comp" @input="comp=$event"></ml-tabbar> -->
    <ml-tabbar v-model="comp"></ml-tabbar>

  </div>
  <script>
    let Home = {
      template: `
                <div>
                    <h1>首页</h1>   
                    <input type="text" v-model="a"></input> 
                </div>
            `,
      data() {
        return {
          a: 1
        }
      },
      mounted() {
        console.log("home挂载完毕了");
      },
      beforeDestroy() {
        console.log("home销毁");
      },
      activated() {
        console.log("home组件激活了");
      },
      deactivated() {
        console.log("home组睡眠了");
      },
    }
    let About = {
      template: `
                <div>
                    <h1>关于</h1>   
                    <input type="text" v-model="a"></input> 
                </div>
            `,
      data() {
        return {
          a: 2
        }
      },
      mounted() {
        console.log("about挂载完毕了");
      },
      beforeDestroy() {
        console.log("about销毁");
      },
      activated() {
        console.log("about组件激活了");
      },
      deactivated() {
        console.log("about组睡眠了");
      },
    }
    let User = {
      template: `
                <div>
                    <h1>我的</h1>   
                    <input type="text" v-model="a"></input> 
                </div>
            `,
      data() {
        return {
          a: 3
        }
      },
      mounted() {
        console.log("user挂载完毕了");
      },
      beforeDestroy() {
        console.log("user销毁");
      },
      activated() {
        console.log("user组件激活了");
      },
      deactivated() {
        console.log("user组睡眠了");
      },
    }
    Vue.component("ml-tabbar", {
      template: `
        <div class="tabbar">
          <span @click='$emit("input",item.tab)' v-for="item in list" :class='{on:item.tab == value}'>{{item.label}}</span>
        </div>
      `,
      props: {
        value: { type: String, default: "" }
      },
      data() {
        return {
          list: [
            { id: 1, tab: 'ml-home', label: "首页" },
            { id: 2, tab: 'ml-about', label: "关于" },
            { id: 3, tab: 'ml-user', label: "我的" },
          ]
        }
      }
    });
    let vm = new Vue({
      components: {
        "ml-home": Home,
        "ml-about": About,
        "ml-user": User,
      },
      el: "#app",
      data() {
        return {
          name: "码路",
          comp: "ml-home"
        }
      }
    });
  </script>
</body>

</html>